<template>
  <div class="zong">
    <div class="tou">
      <el-page-header title="" @back="goBack" content="我的优惠劵">
      </el-page-header>
      <div class="guanli">管理</div>
    </div>
    <div class="zhong">
      <div class="kuang">
        <div class="xuanze">
          <el-checkbox-group v-model="checkList">
            <el-checkbox label="没过期"></el-checkbox>
            <el-checkbox label="已过期"></el-checkbox>
          </el-checkbox-group>
        </div>
        <div 
        class="list" 
        v-for="(item,index) in data" 
        :key="index">
          <div class="zuo">{{item.jine}}</div>
          <div class="you">
            <div class="y_zuo">{{item.quanxian}}</div>
            <div class="y_you">
              <button>去使用</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checkList: ["没过期"],
      data: "",
    };
  },
  methods: {
    goBack() {
      this.$router.push("/wode");
    },
  },
  mounted() {
    this.axios({
      method: "post",
      url: "http://localhost:3000/youhuijuan",
    })
      .then((res) => {
        this.data = res.data.data;
        console.log(this.data);
      })
      .catch((error) => {
        console.log(error);
      });
  },
};
</script>
<style scoped>
.tou {
  height: 40px;
  background-color: rgb(196, 199, 202);
  padding-top: 20px;
  font-size: 16px;
  position: relative;
}
.guanli {
  position: absolute;
  right: 20px;
  top: 20px;
  color: orangered;
}
.zhong {
  margin-top: 10px;
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.kuang {
  padding-top: 10px;
  width: 95%;
  height: 200px;
  border-radius: 5px 5px;
  background-color: rgb(236, 238, 236);
}
.list {
  display: flex;
  height: 70px;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: rgb(214, 221, 190);
}
.xuanze {
  height: 30px;
}
.zuo {
  flex: 1;
  background-color: aqua;
  font-size: 36px;
  text-align: center;
  margin: auto;
}
.you {
  flex: 4;
  background-color: bisque;
  display: flex;
}
.y_zuo {
  flex: 3;
  text-align: center;
  margin: auto;
}
.y_you {
  flex: 2;
  margin: auto;
}
</style>
